<template>
	<view class="carItems" @click="_nav">
		<view class="u-flex">
			<image mode="aspectFill" :src="baseUrl+rent.imgs.split(',')[0]" />
			<view class="f1">
				<view class="title">{{rent.brand}} {{rent.code}}</view>
				<view style="display: flex;margin-top: 28rpx;color: #acacac;">
					{{rent.type}}
					<u-line color="red" direction='col' margin='10rpx' />
					{{rent.gear}}
					<u-line color="red" direction='col' margin='10rpx' />
					{{rent.seat+'座'}}
					<u-line color="red" direction='col' margin='10rpx' />
					{{rent.tank+'L'}}
					<u-line color="red" direction='col' margin='10rpx' />
				</view>
			</view>
		</view>
		<view class="carItemsFooter u-flex">
			<text class="cm_price_tip">{{rent.rentFee}}</text>
			<text class="cm_text"> / 天</text>
			<view class="f1"></view>
			<text class="cm_text">车辆详情</text>
			<u-icon name="arrow-right" color="#999" size="24"></u-icon>
		</view>
	</view>
</template>

<script>
	import SET from '@/SET.js'
	export default {
		name: "carItems",
		data() {
			return {
				baseUrl: SET.baseUrl,
			};
		},
		props: {
			rent: {
				type: Object,
				required: true
			},
		},
		onLoad() {
			console.log(rent)
		},
		methods: {
			_nav() {
				let rent = this.rent
				uni.navigateTo({
					url: '/pages/features/carDetail/carDetail',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage(data) {
							console.log(data)
						},
						someEvent(data) {
							console.log(data)
						}
					},
					success(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							rent
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.carItems {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		border-radius: 12rpx;

		.pics {
			width: 210rpx;
			height: 118rpx;
			margin-right: 24rpx;
			background: #f1f1f1;
		}

		.title {
			font-weight: 600;
			line-height: 2;
			font-size: 32rpx;
		}
	}

	.carItemsFooter {
		padding-top: 16rpx;
		margin-top: 16rpx;
		border-top: 1rpx solid #f8f8f8;
	}

	.rc-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
</style>
